<template>
	   <view class="concent">
	        <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" >
	           	<swiper-item>
	           		<view class="swiper-item">
	           			<image src="../../../static/book.jpg"></image>
	           		</view>
	           	</swiper-item>
	           	<swiper-item>
	           		<view class="swiper-item">
	           			<image src="../../../static/book4.jpg"></image>
	           		</view>
	           	</swiper-item>
	           	<swiper-item>
	           		<view class="swiper-item">
	           			<image src="../../../static/book2.webp"></image>
	           		</view>
	           	</swiper-item>
	           	<swiper-item>
	           		<view class="swiper-item">
	           			<image src="../../../static/book3.jpg"></image>
	           		</view>
	           	</swiper-item>
	       </swiper>
		   <view class="body">
			<view style="text-align: center;font-size: 18px;font-weight: bold;">
				<text class="cuIcon-read">现在来借点书看看吧</text>
			</view>
			<view class="message">   
			 <view class="bookname" style="display: flex;font-size: 15px;" >
				<text style="color: #39B54A">书名:</text>
				<input  style="width: 80%; background-color: #F8F8F8; border-radius: 25upx;" v-model="booknamee"/>
			 </view>
			 <view class="name" style="display: flex;font-size: 15px;">
				<text style="color: #39B54A;">姓名:</text>
				<input  style="width: 80%; background-color: #F8F8F8; border-radius: 25upx;" v-model="name" />
			 </view>
			 <view class="time" style="display: flex;font-size: 15px;">
				<text style="color: #39B54A;">时间:</text>
				<input  style="width: 80%; background-color: #F8F8F8; border-radius: 25upx;" placeholder="xx年xx月xx日" v-model="timee"/>
			 </view>
			 <view class="button" style="padding-top: 10%;text-align: center;">
				<button @click="borrow()" class="cu-btn round line-olive" size="mini">借书</button>
			 </view>
            </view>
		   </view>
		  
	   </view>
	 
</template>

<script>
	export default{
	data(){
		return{
			booknamee:"",
			timee:"",
			name:"",
			bool:""
			
		}
	},
	onLoad(){
		
	},
	
	methods:{
		borrow(){
			console.log(this.booknamee)
			console.log(this.name)
			console.log(this.timee)
			if(this.bool)
			{
				uni.showModal({
					content:"确定借"+this.booknamee+"吗？"
				})
				this.booknamee=""
				this.timee=""
				this.name=""
				this.bool=false
			}
			else {
				uni.showToast({
					icon:"none",
					title:"输入完整"
				})
			}
			
		}
		
	}
	
	 }
	 
</script>

<style>
	.message{
		border: #CCCCCC 5px solid;
		border-radius: 5px;
	}
	.body{
		width: 100%;
		height: 400px;
		border-radius: 40upx;
		padding-top: 10%;
	}
	.bookname{
	    height: 30px;
		width: 100%;
		padding-top: 20px;
		padding-left: 5%;
	}
	.name{
		height: 30px;
		width: 100%;
		padding-top: 20px;
		margin-top: 10%;
		padding-left: 5%;
	}
	.time{
		height: 30px;
		width: 100%;
		padding-top: 20px;
		margin-top: 10%;
		padding-left: 5%;
	}
	.swiper{
		width: 100%;
		height: 150px;
	}
	.swiper-item image{
		width: 100%;
		height: 150px;
	}
</style>
